<template>
  <div>
    御剑乘风来,除魔天地间!
    <h1 v-ff="msg">123123</h1>
    <button></button>
    <Derective></Derective>
    <ul>
      <li v-for="item in list" :key="item.id">
        <img style="width: 200px" :src="item.img" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
    <div v-loading="list.length == 0"></div>
    <img v-errImg="" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
  </div>
</template>
<script>
import defaultImg from "../assets/logo.png";
import Derective from "./directive/Directive.vue";
export default {
  components: {
    Derective,
  },
  data() {
    return {
      msg: "我自横刀",
      list: [],
      img:'',
      defaultImg
    };
  },
  directives: {
    ff: {
      inserted(el, binding) {
        console.log(el);
        el.innerHTML = binding.value;
      },
    },
    loading: {
      inserted(el) {
        el.classList.add("loading");
        el.innerHTML = "正在加载中....";
      },
      update(el, binding) {
        //使用指令的元素更新了就会触发
        if (!binding.value) {
          el.style.display = "none";
        }
      },
    },
    errImg: {
      inserted(el) {
          el.onerror = () => {
              el.src=this.defaultImg
          }
      }
    }
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    async getData() {
      const res = await this.$axios.get("https://hmajax.itheima.net/api/news");
      this.list = res.data.data;
    },
  },
};
</script>
<style lang='less'  scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 50px;
  font-weight: bolder;
  line-height: 100vh;
  color:aquamarine;
}
</style>
